<template>
  <div class="wrap">
    <div class="title">
      <div>我的收藏</div>
      <div></div>
      <div>收藏的商品</div>
    </div>
    <!-- 內容 -->
    <div class="good">
      <!-- 每壹個item -->
      <div class="good_item" v-for="(item,index) in arr" :key='index'>
          <!-- 商品圖片 -->
          <img class="goodimg" :src="item.src" alt=""  @click="gotodetail(item.id)">
          <img class="collectimg" src="@/assets/collect4.png" alt="">
          <!-- 商品內容 -->
          <div class="scroll_item_con">
            <!-- 標題 -->
            <div class="item_con_title">{{item.name}}</div>
            <!-- 簡介 -->
            <!-- <div class="item_con_text">
              <div></div>
            </div> -->
            <!-- 價格 -->
            <div class="item_con_price">
              <!-- <div>${{item.counterPrice}}</div>
              <div>{{item.retailPrice}}</div> -->
              <div>${{item.price}}</div>
              <div>{{item.oldprice}}</div>
            </div>
          </div>
      </div>
    </div>
    <!-- 分頁 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-size="limit" 
        :page-sizes='[8,16]' layout="total,sizes, prev, pager, next, jumper " :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getToken,removeToken } from '@/utils/auth' // 驗權
import { collectlist } from '@/api/car'
export default {
  data(){
    return{
      arr:[{src:require('@/assets/good1.jpg'),name:'波士頓龍蝦1',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good.png'),name:'波士頓龍蝦2',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good2.jpg'),name:'波士頓龍蝦3',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good3.jpg'),name:'波士頓龍蝦4',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good4.jpg'),name:'波士頓龍蝦5',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good5.jpg'),name:'波士頓龍蝦5',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1}],
      total:null,
      page:1,
      limit:10
    }
  },
  mounted(){
    this.getdata()
  },
  // mounted(){
  //   collectlist({"limit": this.limit,"order": "desc","page": this.page,"sort": "add_time","type": 0,"userId": getToken()}).then(response => {
  //       console.log(response)
  //       if(response.errno == 0){
          
  //       }else{
  //         this.$message({
  //           type:'error',
  //           message:'暫時無法設置默認地址'
  //         })
  //       }
  //     })
  // },
  methods: {
    getdata(){
      collectlist({"limit": this.limit,"order": "desc","page": this.page,"sort": "add_time","type": 0,"userId": getToken()}).then(response => {
        console.log(response)
        if(response.errno == 0){
          
        }else{
          this.$message({
            type:'error',
            message:'暫時無法設置默認地址'
          })
        }
      })
    },
    handleSizeChange(val) {
      this.limit = val;
      // this.getdata();
    },
    handleCurrentChange(val) {
      this.page = val;
      // this.getdata();
    },
     // 分頁
    handleSizeChange(val) {
      this.limit = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.getdata();
    },
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    /* background: #FFFFFF; */
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: -15px;
    background: white;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 100%;
    margin: 0px auto;
    background: transparent;
  }
  .good{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* margin: 20px 0px; */
  }
  .good_item{
    width: 240px;
    height: 350px;
    box-sizing: border-box;
    /* padding: 10px 20px; */
    margin-bottom: 8.35px;
    margin-right: 8.35px;
    position: relative;
    background: white;
  }
  .good_item:nth-child(4n){
    margin-right: 0px;
  }
  .goodimg{
    width: 100%;
    height: 253px;
    object-fit: cover;
  }
  .collectimg{
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .scroll_item_con{
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }
  .item_con_title{
    font-size: 22px;
    font-weight: 400;
    color: #101010;
    line-height: 36px;
    overflow: hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .item_con_text{
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
  }
  .item_con_text>div:nth-child(1){
    font-size: 20px;
    font-weight: 400;
    color: #101010;
    line-height: 36px;
    overflow: hidden;
    height: 36px;
    text-overflow:ellipsis;
    white-space: nowrap;  
  }
  .item_con_text>div:nth-child(2){
    display: flex;
    align-items: center;
  }
  .item_con_text>>>.el-input-number,.item_con_text>>>.el-input-number--mini{
    width: 100px;
  }
  .item_con_text>>>.el-input-number__decrease,.item_con_text>>>.el-input-number__increase{
    background: #fff;
  }
  .item_con_text>>>.el-input-number__decrease:hover, .item_con_text>>>.el-input-number__increase:hover{
    color: #101010;
  }
  .item_con_text>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .item_con_text>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
    border-color: #DCDFE6;
  }
  .item_con_text>>>.el-input__inner:hover{
    border-color: #DCDFE6;
  }
  .item_con_text>>>.el-input__inner:not(.is-disabled){
    border-color: #DCDFE6;
  }
  .item_con_text>>>.el-input__inner:active{
    border-color: #DCDFE6;
  }
  .item_con_price{
    display: flex;
    align-items: center;
    margin: 15px 0px;
  }
  .item_con_price>div:nth-child(1){
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #FF1010;
  }
  .item_con_price>div:nth-child(2){
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    color: #999999;
    margin-left: 20px;
  }
  .pagination-container{
    width: 70%;
    box-sizing: border-box;
    margin: 100px auto;
  }
  .pagination-container>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
    background: #BE9A67;
    color: white;
  }
  .pagination-container>>>.el-pagination.is-background .el-pager li:hover{
    color: #BE9A67;
  }
  .pagination-container>>>.el-pagination__editor.el-input .el-input__inner:hover,.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:active{
    border-color: #BE9A67;
  }
  .pagination-container>>>.el-input__inner:active{
    border-color: #BE9A67;
  }
  .pagination-container>>>.el-select .el-input.is-focus .el-input__inner,.pagination-container>>>.el-pagination__sizes .el-input .el-input__inner:hover,.pagination-container>>>.el-select .el-input__inner:focus{
    border-color: #BE9A67;
  }
  .pagination-container>>>.el-input__inner:focus{
    border-color: #BE9A67;
  }
</style>